<template>
  <section class="product-category-section">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-2xl font-semibold text-gray-800">{{ title }}</h2>
      <a href="#" class="text-sm text-gray-500 hover:text-purple-600 transition-colors">查看更多 &gt;</a>
    </div>
    <div class="grid grid-cols-5 gap-5">
      <router-link
        v-for="product in products"
        :key="product.id"
        :to="`/product/${product.id}`"
        class="product-item group block bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-xl transform transition-all duration-300 hover:-translate-y-1"
      >
        <div class="block overflow-hidden h-48">
          <img :src="product.imgUrl" :alt="product.name" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
        </div>
        <div class="p-4 text-sm text-center">
          <p class="text-gray-700 truncate mb-1 group-hover:text-blue-600 font-medium">{{ product.name }}</p>
          <p class="text-gray-400 text-xs truncate mb-2 h-4">{{ product.desc }}</p>
          <p v-if="product.specification" class="text-gray-500 text-xs truncate mb-1">规格: {{ product.specification }}</p>
          <p class="text-red-500 text-lg font-semibold">{{ formatPriceAuth(product.price, !!userStore.token) }}</p>
          <div class="text-xs text-gray-400 mt-1 flex justify-center space-x-2">
            <span v-if="product.salesVolume !== undefined">已售: {{ product.salesVolume }}</span>
            <span v-if="product.stockLevel !== undefined">库存: {{ product.stockLevel }}</span>
          </div>
          <!-- 近效期信息 -->
          <div v-if="product.nearestExpiredDate" class="text-xs text-gray-500 mt-2 space-y-1">
            <div class="text-center">
              <span>有效期: </span>
              <span class="text-orange-600 font-medium">{{ formatDate(product.nearestExpiredDate) }}</span>
            </div>
          </div>
        </div>
      </router-link>
    </div>
  </section>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { useUserStore } from '@/stores/user'
import { formatPriceAuth } from '@/lib/utils'

interface Product {
  id: number
  name: string
  desc?: string
  price: string
  imgUrl: string
  specification?: string
  salesVolume?: number
  stockLevel?: number
  expiryDate?: string
  manufacturer?: string
  nearestExpiredDate?: string
}

const { title, products } = defineProps<{
  title: string
  products: Product[]
}>()

const userStore = useUserStore()

// 格式化日期函数
function formatDate(dateString: string): string {
  if (!dateString) return ''
  
  try {
    const date = new Date(dateString)
    if (isNaN(date.getTime())) return dateString
    
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    
    return `${year}-${month}-${day}`
  } catch (error) {
    return dateString
  }
}
</script>

<style scoped>
.product-item .text-gray-400 {
  height: 1rem;
  min-height: 1rem;
}
</style> 